<template>
  <div class="message">
    <el-container>
      <el-header>
        <el-row justify="space-between" type="flex" style="">
          <el-col :span="4"
                  style="color: white;height:80px;display:flex;justify-content: center;align-items:center;width: 200px">
          </el-col>
          <el-col :span="16" style="height:80px;display:flex;justify-content: center;align-items:center">
            <el-button v-if="login_status === true" class="button" @click="toTack">竞赛</el-button>
            <el-button v-else class="button" @click="toLogin">登录入口</el-button>
            <el-button class="button-right" @click="toMessage">公告</el-button>
          </el-col>
          <el-col :span="4" style="height:80px;display:flex;justify-content: center;align-items:center">
            <el-button v-if="auth === 2" class="admin" @click="toadmin">后台管理</el-button>
            <el-button v-if="login_status === true" class="logout" @click="quit">退出</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="min-height: calc(100vh - 60px);color: white">
        <el-row justify="center" type="flex">
          <el-col :span="17" style="display:flex;justify-content: center;margin-bottom: 10px">
          </el-col>
        </el-row>
        <el-row v-for="item in allMessage" :key="item.title" justify="center" type="flex" style="margin-bottom: 15px">
          <el-col :span="17">
            <el-card class="box-card" style="background:#152535;color:#0080FF;border: none">
              <div style="color: #00b0cc">
                <h3 style="display: flex;justify-content: center">2021年（第26届）全国广播电视技术能手竞赛</h3>
                <h3 style="display: flex;justify-content: center;margin-bottom: 20px">网络安全专业技能考核参赛说明</h3>
              </div>
              <div class="markdown-body">
                <VueMarkdown :source="item.context"></VueMarkdown>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  name: "message",
  components: {
    VueMarkdown // 注入组件
  },
  data() {
    return {
      auth: 0,
      allMessage: [],
      login_status: false
    }
  },
  mounted() {
    // 判断是否第一次进入
    let res = localStorage.getItem("first_login")
    if (res) {
      this.login_status = true
    }else{
      localStorage.setItem("first_login", "ok")
      this.login_status = false
    }

    function formatDate(date) {
      let d = new Date(date),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear();

      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;
      return [year, month, day].join('-');
    }

    // this.$axios2.post('/login').then((res) => {
    //   let code = res.data.code
    //   if (code === 200) {
    //     this.$axios2.post('/auth').then((res) => {
    //       let code = res.data.code
    //       if (code === 2) {
    //         this.auth = 2
    //       }
    //     })
    //   } else {
    //     this.$router.push('/')
    //   }
    // })
    // 获取公告内容
    this.$axios1.post('/MessageInfo').then((res) => {
      let data = res.data.message
      for (let i = 0; i < data.length; i++) {
        let list = {}
        list.time = formatDate(data[i].CreatedAt)
        list.title = data[i].title
        list.context = data[i].context
        this.allMessage.push(list)
      }
    })
  },

  methods: {
    quit() {
      this.$axios2.post('/quit').then((res) => {
        this.$message({
          message: res.data.msg,
          type: 'success'
        });
        this.$router.replace('/')
      })
    },
    toadmin() {
      this.$router.push('/admin/dash')
    },
    toLogin() {
      this.$router.push('/')
    },
    toHome() {
      this.$router.push('/').catch(err => {
        err
      })
    },
    toTack() {
      this.$router.push('/task').catch(err => {
        err
      })
    },
    toMessage() {
      this.$router.push('/message').catch(err => {
        err
      })
    }
  }
}
</script>

<style scoped>
.task {
  background-color: #040813;
  min-height: calc(100vh);
  color: white;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.markdown-body {
  color: #00b0cc;
}

.admin {
  width: 110px;
  border: none;
  font-size: 14px;
  margin: 10px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/admin-button.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.admin:hover {
  width: 110px;
  border: none;
  font-size: 14px;
  margin-left: 10px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/admin-button.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.button {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-left.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

.button:focus {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-left.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

.button:hover {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-left.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

/deep/ .markdown-body table tr {
  background-color: #152535 !important;
}

.button-right {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-right.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

.button-right:focus {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-right.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

.button-right:hover {
  margin-left: 0 !important;
  display: flex;
  padding: 0;
  justify-content: center;
  background-size: 100%, 100%;
  background: url("~@/assets/button-background-right.png");
  width: 120px;
  height: 80px;
  border: none;
  color: #03A4CE;
  align-items: center;
}

.logout {

  width: 110px;
  border: none;
  font-size: 14px;
  margin: 10px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/button-left.png");
  background-size: 100%, 100%;
  color: #ccc;
}

.logout:hover {

  width: 110px;
  border: none;
  font-size: 14px;
  margin: 10px;
  padding-right: 55px;
  height: 48px;
  background: url("~@/assets/button-left.png");
  background-size: 100%, 100%;
  color: #ccc;
}
</style>